Installation

Follow the steps below to get started with your Site Template:

Unzip the downloaded zip file themeforest-xxxxx.zip folder
The open folder named main-file
Here you will find assets folders of all files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- css - Extra Stylesheets Folder plus Main Stylesheet File
- images - Images Folder
- jquery - Javacripts Folder
- .html extension files - main page template File
You will need to Upload these files to your Web Server using FTP in order to use it on your Website and give the paths of files in .html extension files.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Salva follows a simple coding structure. here is the sample:

<!DOCTYPE html>
<html lang="zxx" dir="ltr">

<!-- All your metas will be here -->

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<head>

<!-- Your Stylesheets, Title -->
...

</head>

<body class="salva-body-wrap">

<!-- Page Loader start here -->
<div class="overlay">
...
</div>

<!-- Page Cursor start here -->
<div class="cursor">
...
</div>

<!-- Page Wrapper -->
<div class="salva-page-wrap"> 

<!-- Homepage -->

<section class="salva-fixed-content" id="home_page"> 
  <div class="container-fluid"> 
    <div class="col-12 col-md-5 col-lg-4 col-xxl-5 salva-left-fixed-image p-0" >
      .....
    </div>
    <div class="col-12 col-md-12 col-lg-8 col-xxl-7 salva-home-content p-0" >
      .....
    </div>
  </div>
</section> 

<!-- source javascript ->
...

</body>
</html>

About Me Page Structure

You can edit the content of About Me page according to your requirement.For that you have to check the about-us.html page.

<!-- -About Section start here -->
    <section class="salva-fixed-content" id="about_us">
        <div class="container-fluid">
          ...
        </div>
    </section>

Portfolio Page Structure

Salva follows a simple coding structure to set the portfolio.For set the portfolio you need to check the portfolio.html file where you find portfolio page source code.Simply change the path of your image and content.

<!-- Salva portfolio content start here -->
    <section class="salva-fixed-content" id="portfolio">
        <div class="container-fluid">
          ...
        </div>
    </section>

Portfolio Slider Structure

Salva Follows a simple structure to set the image slider for portfolio.For set the image slider you need to check the portfolio.html file where you can find the Project Slider code.Simply change the path of image from the custom.css file and it works fine.

<!-- Project Slider page start here -->
    <div class="salva-project-content salva-slider-page">
      <div class="salv-back-btn salv-single-img-btn">
        ...
      </div>
      <div class="slider-container">
        ...
      </div>
    </div>

Portfolio Soundcloud Structure

Salva Follows a simple structure to set the soundcloud for portfolio.For set the soundcloud you need to check the portfolio.html file where you cam find the code for soundcloud. You just need to paste the soundcloud iframe code there and it works fine.

<!-- Project Soundcloud page start here -->
    <div class="salva-project-content salva-soundcloud-page">
      <div class="salv-back-btn salv-single-img-btn">
         ...
      </div>
      <div class="salva-soundcloud-video">
        ...
       </div>
    </div>

Portfolio Vimeo Video Structure

Salva Follows a simple structure to set the Vimeo video for portfolio.For set the vimeo video you need to check the portfolio.html file where you can find the code for the vimeo video. You just need to paste the vimeo iframe there and it works fine.

<!-- Project Vimeo video page start here -->
    <div class="salva-project-content salva-vimeo-content">
      <div class="salv-back-btn salv-single-img-btn">
         ...
      </div>
      <div class="salva-vimeo-video">
         ...
      </div>
    </div>

Portfolio Youtube Video Structure

Salva Follows a simple structure to set the Youtube video for portfolio.To set the youtube video you need to check the portfolio.html file where you can find the code for the youtube video You just have to copy the embedded code from the youtube video and paste the link to the video there and it works fine.

<!-- Project Youtube video page start here -->
    <div class="salva-project-content salva-youtube-video-page">
      <div class="salv-back-btn salv-single-img-btn">
         ...
      </div>
      <div class="salva-youtube-video">
         ...
      </div>
    </div>

Portfolio Single Image Structure

Salva Follows a simple structure to set the Single Image for portfolio.For set the single image you need to check the portfolio.html file where you just need to paste the image path there and it works fine.

<!-- Project Single Image page start here -->
    <div class="salva-project-content salva-image-page">
      <div class="salv-back-btn salv-single-img-btn">
         ...
      </div>
      <div class="salva-single-image">
         ...
      </div>
    </div>

Single Detail Page Structure

Salva Follows a simple structure to set the Single Detail page for portfolio.For set single detail page for your site you just need to check the single detail page code in portfolio.html page and edit the content according to your requirement and also change the image according to your choice and it works fine.

<!-- Detail Structure -->
    <div class="alva-project-content salva-project-detail">
        <div class="salv-inrto-content">
            ...
        </div>
        <div class="alv-project-details">
            ...
        </div>
    </div>

News Page Structure

Salva Follows a simple structure to set the News page for portfolio.For set news blog page for your site you just need to check the news.html file where you can find the elements for the news blog page. Just simply change the name of news and image as per your requirements and it work fine.To change the image of the news page you have to check the custom.css file where you can find the code for the blog news page simply replace the path of your image and it works fine.

<!-- Salva news page start here-->
    <section class="salva-fixed-content" id="news_page">
        <div class="container-fluid">
          <div class="salva-left-fixed-image" >
            ...
          </div>
          <div class="salva-home-content">
            <div class="salva-news-main-wrap">
              ...
            </div>
          </div>
        </div>
    </section>

Blog News Detail Page Structure

Salva Follows a simple structure for the single news blog page. For set the single blog detail page you just need to check the news.html file where you can find the code for the single news blog page. Just simply change the name of the news, content of the news and images of the news and it works fine.

<!-- single news blog page content start here -->
    <div class="salva-single-news-content">
      ...
    </div>

Contact Us Page Structure

Salva Follows a simple structure to set the Contact us page for portfolio.For set contact us page for your site you just need to check the contact-us.html file where you can find the elements for the contact us page. Just simply change the content as per your requirements and it work fine.

<!--Salva page content start here -->
    <section class="salva-fixed-content" id="contact_us">
        <div class="container-fluid">
              ....
        </div>
    </section>

Weekend Mode Page Structure

Salva follow a simple structure for the weekend mode. For change the content of the weekend mode elements you have to check the html files of the portfolio.If you want to change the weekend mode image you have to check the custom.css file where you can find the code for the weekend mode page image.Simply change the path of your image and it works fine.

<!-- weekend-mode start here -->
    <div class="salva-weekend-mode">
      ...
    </div>

Salva Dark Theme

You can convert your theme into Dasrk mode by just adding the dark-page class in your body.And also you have to change the element font color by adding some classes in page.

<!--Light Theme section start here -->
    <body class="salva-body-wrap">
      <section class="salva-fixed-content salva-dark-section">
        <div class="container-fluid">
              ....
        </div>
      </section>
    </body>

Salva Slider Demo

Salva follow a simple structure to set the Slider demo for portfolio pages.For set the slider on left side of page you just need to check the home.html and other page which is located into Light-slider folder. If you want to give the slider on dark theme then you have to edit the Dark-slider folder files.In that file you can find the slider code for the image.

If you want to change the slider image than you have to just save the image in that folder and rename the slider image name in html file.If you want add more image images in slider than you have to just copy the hitem salva-slider-item div and paste it below the code.

<!--Slider section start here-->
      <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-home-image hero_carosel owl-carousel owl-theme">
                  <div class="item salva-slider-item">
                    <img src="../assets/images/home-slider/slider-image-one.png" alt="slider imagee one">
                  </div>
                  <div class="item salva-slider-item">
                    <img src="../assets/images/home-slider/slider-image-two.png" alt="slider imagee two">
                  </div>
                  <div class="item salva-slider-item">
                    <img src="../assets/images/home-slider/slider-image-three.png" alt="slider imagee three">
                  </div>
                   <div class="item salva-slider-item">
                    <img src="../assets/images/home-slider/slider-image-four.png" alt="slider imagee four">
                  </div>
               </div>
              ....
        </div>
      </section>

Salva Video Demo

Salva follow a simple structure to set the Custom Video for portfolio pages.To set the video on pages you just need to check the html pages which is located into Light-video folder. If you want to give the Video on Dark theme then you have to edit the Dark-video folder html files.

In that file you can find the code for custom video.You have to just save the video in video folder and rename the video name in html file.

<!--Video Section start here -->
      <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
                <div class='salva-left-fixed-image salva-home-video'>
                  <div  class='salva-home-image'>
                    <video preload="auto" autoplay loop muted width="1440" height="900">
                      <source src="source src="../assets/video/salva-video.mp4" type="video/mp4">
                    </video>
                  </div>
                </div>
              ....
        </div>
      </section>

Salva Vimeo Demo

Salva follow a simple structure to set the Vimeo Video for portfolio pages.To set the vimeo video on pages you just need to check the html pages which is located into Light-vimeo folder. If you want to give the Vimeo Video on Dark theme then you have to edit the Dark-vimeo folder html files.

In that file you can find the iframe code for vimeo video.You have to just copy the vimeo video iframe code and paste it there.And it works fine.

<!--Vimeo Video Section start here -->
      <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
                <div class='salva-left-fixed-image salva-home-vimeo'>
                    ...
                  <iframe src="https://player.vimeo.com/video/81400335?autoplay=1&muted=1" allowfullscreen  allow=autoplay ></iframe>
                </div>
              ....
        </div>
      </section>

Salva Youtube Demo

Salva follow a simple structure to set the Youtube Video for portfolio pages.To set the youtube video on pages you just need to check the html pages which is located into Light-youtube folder. If you want to give the Yotube Video on Dark theme then you have to edit the Dark-youtube folder html files.

In that file you can find the iframe code for youtube video.You have to just copy the youtube video embeded iframe code and paste it there.And it works fine.

<!--Youtube Video Section start here -->
      <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
                <div class='salva-left-fixed-image slava-youtube-video'>
                    ...
                  <iframe src="https://www.youtube.com/embed/uWQ_8CtvzoY?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" allowfullscreen ></iframe>
                </div>
              ....
        </div>
      </section>

Salva Ripple Effect Demo

Salva follow a simple structure to set the Ripple Effect On portfolio pages.for set the ripple effect on portfolio pages you just need to check the portfolio html pages which is located into Light-ripple folder. If you want to give the ripple effect on dark theme then you have to edit the Dark-ripple folder html files.

In that file you can find the code for the ripple effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-ripple salva-left-fixed-image">
                  <div class="salva-home-image salva-ripple-image" id="ripple"></div>
                  <div class="salva-weekend-image" id="ripple-two"> </div>
                </div>
              ....
        </div>
      </section>

Salva Glitch Effect Demo

Salva follow a simple structure to set the Glitch Effect On portfolio pages.for set the glitch effect on portfolio pages you just need to check the portfolio html pages which is located into Light-glitch folder. If you want to give the glitch effect on dark theme then you have to edit the Dark-glitch folder html files.

In that file you can find the code for the glitch effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                  <div class="glitch salva-home-image"></div>
                  <div class="glitch-two salva-weekend-image"> </div>
                </div>
              ....
        </div>
      </section>

Salva Bubble Particle Demo

Salva follow a simple structure to set the bubble particle effect demo for portfolio homepage. For set the bubble particle effect on your page you just need to to check the home.html page which is located into Light-bubble-particle folder. If you want to give the bubble particle effect on dark theme then you have to edit the Dark-bubble-particle folder home.html file.In that file you can find the bubble particle effect code.If you want to replace the image save image in that folder and rename the image name at the css file.

<!--Home Section start here -->
      <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                 ....
                 <div id="bubble-js"></div>
               </div>
              ....
        </div>
      </section>

Salva Color Bird Effect Demo

Salva follow a simple structure to set the color bird Effect On portfolio pages.for set the color bird effect on portfolio pages you just need to check the portfolio html pages which is located into Light-color-bird folder. If you want to give the color bird effect on dark theme then you have to edit the Dark-color-bird folder html files.

In that file you can find the code for the color bird effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <div id="vantajs"></div>
                </div>
              ....
        </div>
      </section>

Salva Color Box Effect Demo

Salva follow a simple structure to set the color box Effect On portfolio pages.for set the color box effect on portfolio pages you just need to check the portfolio html pages which is located into Light-color-box folder. If you want to give the color box effect on dark theme then you have to edit the Dark-color-box folder html files.

In that file you can find the code for the color box effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image rainbow-box">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <canvas id="rainbow-box" width='1920' height='937'></canvas>
                </div>
              ....
        </div>
      </section>

Salva Constellection Effect Demo

Salva follow a simple structure to set the constellection Effect On portfolio pages.for set the constellection effect on portfolio pages you just need to check the portfolio html pages which is located into Light-constellection folder. If you want to give the constellection effect on dark theme then you have to edit the Dark-constellection folder html files.

In that file you can find the code for the color box effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image constellation">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <canvas id="canvas id="constellationel" width="800" height="900"></canvas>
                </div>
              ....
        </div>
      </section>

Salva Grow Ball Effect Demo

Salva follow a simple structure to set the Grow Ball Effect On portfolio pages.for set the grow ball effect on portfolio pages you just need to check the portfolio html pages which is located into Light-grow-ball folder. If you want to give the grow ball effect on dark theme then you have to edit the Dark-grow-ball folder html files.

In that file you can find the code for the color box effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image growing_bubbles">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <canvas id="bubble-canvas" width="800" height="900"></canvas>
                </div>
              ....
        </div>
      </section>

Salva Particle Effect Demo

Salva follow a simple structure to set the Particle Effect On portfolio pages.for set the particle effect on portfolio pages you just need to check the portfolio html pages which is located into Light-particle folder. If you want to give the particle effect on dark theme then you have to edit the Dark-particle folder html files.

In that file you can find the code for the color particle effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <div class="particle_wrapper" id="particles-js"></div>
                </div>
              ....
        </div>
      </section>

Salva Particle Field Effect Demo

Salva follow a simple structure to set the Particle Field Effect On portfolio pages.for set the particle field effect on portfolio pages you just need to check the portfolio html pages which is located into Light-particle-field folder. If you want to give the particle effect on dark theme then you have to edit the Dark-particle-field folder html files.

In that file you can find the code for the particle effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                  <canvas id="particlesField"></canvas>
                </div>
              ....
        </div>
      </section>

Salva Shape Effect Demo

Salva follow a simple structure to set the shape Effect On portfolio pages.for set the shape effect on portfolio pages you just need to check the portfolio html pages which is located into Light-shapes folder. If you want to give the particle effect on dark theme then you have to edit the Dark-shapes folder html files.

In that file you can find the code for the shape effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image">
                  <div class="salva-boxes">
                    <ul class="salva-shapes">
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </div>
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                </div>
              ....
        </div>
      </section>

Salva Snow Rain Effect Demo

Salva follow a simple structure to set the Snow Rain Effect On portfolio pages.for set the snow rain effect on portfolio pages you just need to check the portfolio html pages which is located into Light-snow-rain folder. If you want to give the snow rain effect on dark theme then you have to edit the Dark-snow-rain folder html files.

In that file you can find the code for the particle effect.

<!--Home Section start here -->
    <section class="salva-fixed-content">
        <div class="container-fluid">
              ....
               <div class="salva-left-fixed-image salva-snow-rain" id="snow-rain-js">
                  <div class="salva-home-image"></div>
                  <div class="salva-weekend-image"> </div>
                </div>
              ....
        </div>
      </section>

Favicons

You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:

<link href="../assets/images/logo/Fevicon.ico" rel="icon">

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of your Website load in the background & then Reveal show Interactive loaders to your Visitors while your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply remove .overlayer Class just after the <body> Tag.

Logo Settings

The Logo Container can be found in the Header Container - header tag

<a href="home.html" class="salva-logo"><img src="../assets/images/logo/logo.png" alt="this is a logo of slava"></a>

Use Videos & iframe

it is possible to show your own videos or other source embed videos. if you want put embed videos then comment code of the video tag, otherwise, just comment code of the iframe tag on the Home slider section. You can find modal-content class name and changes as follows:

Use Videos

use your own videos into the video-section section video tag

 <div class="modal-body">
    <video>
    ...
    </video>  
  </div>

Use iframe

use videos from other source links like youtube embed videos or vimeo video into video-section section iframe tag

 <div class="modal-body">
    <iframe>
    ...
    </iframe>  
  </div>

Changing Fonts

Change your Fonts from Google Fonts Library directly if you plan to use a Google Font. You can find the Linking to the Font Files in the head tag

<https://fonts.googleapis.com/css2?family=Inter:wght@500;600;900&display=swap" rel="stylesheet">

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font, if you plan to use a Google Font or Remove it completely if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

By default, Salva uses one Font namely: Inter from the Google Fonts Library

Website Optimization Tips

A Fast & Optimized Website has several factors which need to be implemented in order to achieve the desired results. There are several Optimization Techniques available that will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

Image Compression & Optimization

We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using them on your Website. Here are some tips which might come in handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
  For MAC use ImageOptim
  For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
CSS & jQuery Minifications

It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier.

Header

You can choose the headers while creating your Pages. Default fix right side Header with a white Background color. Simply follow the structure below to create the header:

<!-- header content start here -->
<header class="salva-header">
...
</header>

Menu Styles

Default Menu Style which aligns to the right with the hamburger menu icon, You can use the Menu just as

<nav class="navbar salva-header-nav">
...
</nav>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

.second-color - set the second primary color of the text.
.dark-sec-color - set the second dark primary color of the text.
.w-text - set the color of text white.
.black-text - set the color of text black.
.inter-font-900 - set the inter font family with font weight 900.
.inter-font-600 - set the inter font family with font weight 600.
.inter-font-500 - set the inter font family with font weight 500.
.inter-font-700 - set the inter font family with font weight 700.
.salv-dark-header - set the Background color dark for dark theme..
.salv-dark-footer - set the dark background color for footer.

Slider Types & their Options

Salva includes Sliders are mentioned as follows:

Slick Carousel
You can find the Slick carousel slider-related Documentation here.
Read Slick Sliders Docs

You can find the Owl carousel slider-related Documentation here.

Read Owl Sliders Docs

Introduction

Salva boasts of many handy features which are quite powerful, flexible, functional & easy to use. you can do changes in features very easily. Here is the list of features that uses in this website:

Sections
Container-fluid
Columns
Scrolling
Animations
Slick Carousels
Owl Carousels
svg
Media Embeds
Buttons
Heading and Title styles
Header
Detail Page
Blog pages
Vimeo Video
Youtube Video
Image Slider
Soundcloud
Different Homepage versions
Dark Layout
Google Map
Contact Form
Counter

Each of the above mentioned features is easily extendable, flexible & easy to use. You can find the sample codes from the stylesheet. We are explaining a few of them for your reference.

Animations

Scroll to reveal Animations are the latest in the Trends. You can use animations on any element you want. Here is the Sample Code:

.fixed-header {
animation: slide-down 0.7s;
}

@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-100%);
} 
100% {
opacity: 0.9;
transform: translateY(0);
} 
}

You can do them too with Bistro. You can use animations on any element you want. Here is the Sample Code:

<div class="default" data-aos="flip-left"></div>

You can also use delays for your Animations:

<div data-aos="flip-left" data-aos-duration="2000"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

fade
fade-up
fade-down
fade-right
fade-left
fade-up-left
fade-up-right
fade-down-right
fade-down-left
flip
flip-left
flip-right
flip-up
flip-down
zoom
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-right
zoom-out-left

Images

Videos

Vimeo
Videos

jQuery

CSS

custom.css- use style css
media-query.css- responsive media query css
Bootstrap 5.2.1
Animation
Slick Carousel
Owl Carousel
Google Fonts

Fonts

Inter

Installation

HTML Structure

About Me Page Structure

Portfolio Page Structure

Portfolio Slider Structure

Portfolio Soundcloud Structure

Portfolio Vimeo Video Structure

Portfolio Youtube Video Structure

Portfolio Single Image Structure

Single Detail Page Structure

News Page Structure

Blog News Detail Page Structure

Contact Us Page Structure

Weekend Mode Page Structure

Salva Dark Theme

Salva Slider Demo

Salva Video Demo

Salva Vimeo Demo

Salva Youtube Demo

Salva Ripple Effect Demo

Salva Glitch Effect Demo

Salva Bubble Particle Demo

Salva Color Bird Effect Demo

Salva Color Box Effect Demo

Salva Constellection Effect Demo

Salva Grow Ball Effect Demo

Salva Particle Effect Demo

Salva Particle Field Effect Demo

Salva Shape Effect Demo

Salva Snow Rain Effect Demo

Favicons

Page Loading Transitions

Logo Settings

Use Videos & iframe

Use Videos

Use iframe

Changing Fonts

Website Optimization Tips

Image Compression & Optimization

CSS & jQuery Minifications

Header

Menu Styles

Columns & Grid

Bootstrap Grid

Helper Classes

Slider Types & their Options

Introduction

Animations

Images

Videos

jQuery

CSS

Fonts